<template>
  <div
    class="group-1"
    :style="{ background: `url(${imgUrl}) no-repeat`, 'background-size': '100% 100%' }"
  >
    <h1 class="title">大宗商城</h1>
    <p class="desc">打造水泥、熟料、混泥土、矿粉等大宗建材商品的一站式交易平台</p>
    <p class="desc1">订单交易嗖嗖的，付款信贷嗖嗖的，物流运输嗖嗖的</p>
    <a href="https://www.sososn.com" target="_blank"
      ><button class="entry-mall">进入商城</button></a
    >

    <div class="section-1">
      <ul class="flex-row">
        <li v-for="(el, i) in dataList" :key="i" class="">
          <h2 class="text_2">
            <div class="icon" :class="el.class"></div>
            {{ el.title }}
          </h2>
          <p class="text_3">{{ el.desc }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const $getAssetsImages = inject('$getAssetsImages')
const imgUrl = ref($getAssetsImages('home.png'))
const dataList = reactive([
  {
    title: '全链',
    desc: '供、销、管、存、物流等全供应链业务在线化',
    class: 'ql_2'
  },
  {
    title: '开发',
    desc: '建立行业上下游端到端的生态服务能力',
    class: 'kf_1'
  },
  {
    title: '可靠',
    desc: '强大的技术中台支撑全链业务，可覆盖企业运',
    class: 'wd_2'
  },
  {
    title: '敏捷',
    desc: '强大的PaaS能力，敏捷高效，帮助企业快',
    class: 'mj_2'
  }
])
</script>
<style lang="scss" scoped>
.group-1 {
  // background: url('../../../assets/images/logo.png') no-repeat;
  position: relative;
  height: 800px;

  .title {
    position: absolute;
    top: 150px;
    left: 240px;
    font-size: 46px;
    font-weight: 500;
    color: #333;
  }

  .desc {
    position: absolute;
    top: 242px;
    left: 240px;
    font-size: 20px;
    color: #495062;
  }

  .desc1 {
    position: absolute;
    top: 272px;
    left: 240px;
    font-size: 20px;
    color: #495062;
  }

  .entry-mall {
    position: absolute;
    top: 466px;
    left: 240px;
    width: 150px;
    height: 49px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    background: #009cff;
    border-radius: 4px;
    box-shadow: 0 2px 11px 0 #e4e8ee;
  }

  .entry-mall:hover {
    background: #35b0ff;
    box-shadow: 0 2px 11px 0 #e4e8ee;
  }

  .section-1 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 112px;
    background: rgb(255 255 255 / 27%);
    backdrop-filter: blur(8px);

    ul {
      margin-left: 258px;

      li {
        width: 360px;
        height: 112px;
        padding-top: 30px;
        padding-left: 18px;
        cursor: pointer;

        .text_2 {
          position: relative;
          padding-left: 30px;
          font-size: 20px;
          font-weight: 400;
          color: #333;

          .icon {
            position: absolute;
            top: 4px;
            left: 0;
          }
        }

        .text_3 {
          margin-top: 8px;
        }
      }

      li:hover {
        color: #fff;
        background: #009cff;
        opacity: 0.9;

        .ql_2 {
          background-position: -204px -0;
        }

        .kf_1 {
          background-position: -129px -0;
        }

        .wd_2 {
          background-position: -292px -0;
        }

        .mj_2 {
          background-position: -168px -0;
        }

        .text_2 {
          color: #fff;
        }
      }
    }
  }
}
</style>
